建立 PlanPicker 元件

在第14天，我繼續重構 App 元件，將咖啡計畫清單抽取到新的 PlanPicker 元件中。這樣不僅讓 App 元件更乾淨，也讓 PlanPicker 元件可以重複使用來建立更多咖啡計畫清單。

App 元件

<script setup lang="ts">
import CoffeePlan from './components/CoffeePlan.vue'
import { ref } from 'vue'

const plans = ref(["The Single", "The Curious", "The Addict", "The Hacker"])
</script>

<template>
   <div class="content">
      <h1 class="title">Coffee Plans</h1>

      <h2 class="subtitle">We travel the world to source the very best single origin coffee for you</h2>

      <div class="plans">
        <CoffeePlan v-for="plan in plans" :key="plan" :name="plan" />
      </div>
    </div>
</template>

上述是現有的 App 元件，我將從中抽取

<div class="plans">
    <CoffeePlan v-for="plan in plans" :key="plan" :name="plan" />
</div>

到一個新的 PlanPicker 元件。

建立 PlanPicker 元件

Vue 3 應用程式

• 建立一個新的 components/PlanPicker.vue 檔案，並更新其模板。

<script setup lang="ts">
import { ref } from 'vue'
import CoffeePlan from './CoffeePlan.vue'

const plans = ref(["The Single", "The Curious", "The Addict", "The Hacker"])
</script>

<template>
    <div class="plans">
        <CoffeePlan v-for="plan in plans" :key="plan" :name="plan" />
    </div>
</template>

• 將 PlanPicker 匯入到 App.vue 中。

<script setup lang="ts">
import PlanPicker from './components/PlanPicker.vue'
</script>

<template>
   <div class="content">
      <h1 class="title">Coffee Plans</h1>

      <h2 class="subtitle">We travel the world to source the very best single origin coffee for you</h2>

      <PlanPicker />
    </div>
</template>

SvelteKit 應用程式

• 建立一個新的 lib/plan-picker.svelte 檔案，並更新其模板。

<script lang="ts">
import CoffeePlan from './coffee-plan.svelte'
</script>

<div class="plans">
	{#each plans as plan (plan)}
		<CoffeePlan name={plan} />
	{/each}
</div>

• 從 lib/index.ts 匯出新的元件。

export * from './plan-picker.svelte';

• 將 PlanPicker 匯入到 +page.svelte 中

<script lang="ts">
import PlanPicker from '$lib/plan-picker.svelte';
</script>

<template>
   <div class="content">
      <h1 class="title">Coffee Plans</h1>

      <h2 class="subtitle">We travel the world to source the very best single origin coffee for you</h2>

      <PlanPicker />
    </div>
</template>

Angular 19 應用程式

• 建立一個新的 PlanPickerComponent。

ng g c PlanPicker

import { CoffeePlanComponent } from '../coffee-plan/coffee-plan.component';

@Component({
  selector: 'app-plan-picker',
  imports: [CoffeePlanComponent],
  template: `
    <div class="plans">
      @for (plan of plans(); track plan) {
        <app-coffee-plan [name]="plan" />
      }
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PlanPickerComponent {
  plans = signal(['The Single', 'The Curious', 'The Addict', 'The Hacker']);
}

• 在 app.component.ts 中將 PlanPickerComponent 匯入到 AppComponent。

import { PlanPickerComponent } from './plan-picker/plan-picker.component';

@Component({
  selector: 'app-root',
  imports: [PlanPickerComponent],
  template: `
    <div class="content">
      <h1 class="title">Coffee Plans</h1>

      <h2 class="subtitle">We travel the world to source the very best single origin coffee for you</h2>

      <app-plan-picker />
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {}

我們已成功建立了一個 PlanPicker 元件，它封裝了 CoffeePlan 元件。PlanPicker 是 CoffeePlan 的父元件，並且將屬性（props）傳遞給子元件。

Github Repositories

• Vue 3: https://github.com/railsstudent/intro-vue3-components
• Svelte 5: https://github.com/railsstudent/intro-svelte-components
• Angular 19: https://github.com/railsstudent/intro-angular-components